<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="profile-card">
          <div class="profile-header">
            <div class="avatar-container">
              <userAvatar />
            </div>
            <div class="info-container">
              <h2>{{ user.userName }}</h2>
              <p><svg-icon icon-class="phone" /> {{ user.phonenumber }}</p>
              <p><svg-icon icon-class="peoples" /> {{ roleGroup }}</p>
              <p><svg-icon icon-class="date" /> {{ user.createTime }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="profile-card">
          <el-tabs v-model="activeTab" class="profile-tabs">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
  },
};
</script>
<style scoped>
.profile-container {
  padding: 60px;
  background-color: #f5f7fa;
}

.profile-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 30px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.avatar-container {
  flex: 1;
  text-align: center;
}

.avatar-container img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #409eff;
}

.info-container {
  flex: 3;
  padding-left: 30px;
}

.info-container h2 {
  font-size: 28px;
  margin: 0;
  color: #333333;
}

.info-container p {
  margin: 8px 0;
  font-size: 16px;
  color: #666666;
  display: flex;
  align-items: center;
}

.info-container p svg {
  margin-right: 10px;
  fill: #409eff;
}

.profile-tabs {
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.profile-tabs .el-tabs__header {
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.profile-tabs .el-tabs__item {
  font-size: 18px;
  color: #333333;
}

.profile-tabs .el-tabs__item.is-active {
  color: #409eff;
  font-weight: bold;
}

.profile-tabs .el-tabs__content {
  padding: 20px;
}
</style>
